<!DOCTYPE html>
<html>
<head>
    <title>Concentric Spheres Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="400" height="450"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Define coordinates and dimensions based on the image
    const centerX = 200;
    const centerY = 200;
    const radius1 = 70;
    const radius2 = 140;

    // Set global drawing styles to match the image
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 1.5;
    ctx.fillStyle = 'black';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Helper function to draw a line with a filled arrow at the end
    function drawArrow(fromX, fromY, toX, toY) {
        const headLength = 12; // Length of the arrowhead
        const angle = Math.atan2(toY - fromY, toX - fromX);

        // Draw the line segment
        ctx.beginPath();
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        ctx.stroke();

        // Draw the filled arrowhead
        ctx.beginPath();
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 7), toY - headLength * Math.sin(angle - Math.PI / 7));
        ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 7), toY - headLength * Math.sin(angle + Math.PI / 7));
        ctx.closePath();
        ctx.fill();
    }

    // Draw the outer circle
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius2, 0, 2 * Math.PI);
    ctx.stroke();

    // Draw the inner circle
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius1, 0, 2 * Math.PI);
    ctx.stroke();

    // Draw the center point 'O'
    ctx.beginPath();
    ctx.arc(centerX, centerY, 3.5, 0, 2 * Math.PI);
    ctx.fill();

    // Draw the label 'O'
    ctx.font = "italic 24px 'Times New Roman'";
    ctx.fillText('O', centerX - 22, centerY + 8);

    // Draw the radius r1
    const angle1 = -30 * Math.PI / 180; // Approximately -30 degrees
    const r1_endX = centerX + radius1 * Math.cos(angle1);
    const r1_endY = centerY + radius1 * Math.sin(angle1);
    drawArrow(centerX, centerY, r1_endX, r1_endY);

    // Draw the label 'r₁'
    ctx.font = "italic 24px 'Times New Roman'";
    const r1_labelX = centerX + radius1 * 0.6 * Math.cos(angle1);
    const r1_labelY = centerY + radius1 * 0.6 * Math.sin(angle1) - 12;
    ctx.fillText('r₁', r1_labelX, r1_labelY);

    // Draw the radius r2
    const angle2 = 45 * Math.PI / 180; // Approximately 45 degrees
    const r2_endX = centerX + radius2 * Math.cos(angle2);
    const r2_endY = centerY + radius2 * Math.sin(angle2);
    drawArrow(centerX, centerY, r2_endX, r2_endY);

    // Draw the label 'r₂'
    ctx.font = "italic 24px 'Times New Roman'";
    const r2_labelX = centerX + radius2 * 0.55 * Math.cos(angle2) - 10;
    const r2_labelY = centerY + radius2 * 0.55 * Math.sin(angle2) + 10;
    ctx.fillText('r₂', r2_labelX, r2_labelY);

    // Draw the text "题 6 图" below the figure
    ctx.font = "24px 'KaiTi', 'SimSun'"; // Standard Chinese fonts
    ctx.fillText('题 6 图', centerX, centerY + radius2 + 50);

</script>
</body>
</html>